import { Mesh, CylinderGeometry, MeshLambertMaterial } from "three";


export default class PyramidChart {
    public group: Mesh;
    constructor(data: any[], manifest: Manifest) {
        this.group = new Mesh();
        const yTransArr = this.getHeightArr(data);
        const len = data.length;
        data.forEach((item, index) => {
            const { radius, percent } = item;
            // if (index === 1) {
            //     const pyItem = this.drawPyItem(item, yTransArr[index + 1]);
            //     this.group.add(pyItem)
            // }
            const pyItem = this.drawPyItem(item, len, index);
            pyItem.position.y = yTransArr[index] + 0.05 * index;
            this.group.add(pyItem)
        })
    }

    private drawPyItem(item: any, len: number, index: number) {
        const { color, radius, percent } = item;
        const top = (index + 1) / len;
        const bottom = index ? index / len : 0
        console.log(top, bottom)
        const geometry = new CylinderGeometry((radius - top) / 2, (radius - bottom) / 2, radius / 2 * percent, 32);
        const material = new MeshLambertMaterial({ color, depthTest: true });
        const mesh = new Mesh(geometry, material);
        return mesh;
    }

    private getHeightArr(data: any[]) {
        const heightArr = data.map((item) => item.radius / 2 * item.percent);
        console.log(heightArr)
        const arr = heightArr.reduce((acc: number[], cur, index) => {
            if (index === 0) {
                acc.push(cur);
            } else {
                acc.push(cur + acc[index - 1]);
            }
            return acc;
        }, []);
        arr.pop();
        arr.unshift(0);
        return arr;
    }
}
